<template>
  <div class="card"
    style="margin-bottom: 10px;background: linear-gradient(to bottom, #f5f3f2, #92bdce);border: 1px solid;">
    <span style="color: #4a4d52">时间范围查询：</span><el-date-picker v-model="dateRange" value-format="YYYY-MM-DD"
      type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    <el-button type="primary" style="margin-left: 10px" @click="load">查 询</el-button>
    <el-button type="info" style="margin-left: 10px" @click="reset">重 置</el-button>
  </div>
  <div class="card"
    style="margin-bottom: 10px;margin-right: 5px;background: linear-gradient(to bottom, #f5f3f2, #92bdce);border: 1px solid;">
    <el-table :data="data.stuApplyRecordList" stripe style="width: 100%">
      <el-table-column label="申请编号" prop="recordId" width="120" />
      <el-table-column label="真实姓名" prop="stuName" width="150" />
      <el-table-column label="创新创业活动分类类型" prop="typeName" show-overflow-tooltip />
      <el-table-column label="创新创业活动项目" prop="actName" show-overflow-tooltip />
      <el-table-column label="申请学分" prop="creditCount" width="120" />
      <el-table-column label="申请状态" prop="status" width="120">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="watchDetail(scope.row)">查看当前申请进度</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="card"
    style="background: linear-gradient(to bottom, #f5f3f2, #92bdce);margin-right: 5px;border: 1px solid;">
    <el-pagination @current-change="load" @size-change="load" v-model:current-page="data.pageNum"
      v-model:page-size="data.pageSize" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
      :total="data.total" />
  </div>

  <el-dialog title="当前申请进度" v-model="data.formVisible" width="1000px" destroy-on-close>
    <!-- 流程进度容器：用 flex 实现均匀分布 + 横线连接 -->
    <div class="process-container">
      <!-- 步骤1：提交申请 -->
      <div class="process-item" :class="{ active: data.currentStep >= 0 }">
        <div class="icon-circle" :class="{ active: data.currentStep >= 0 }">
          <el-icon class="process-icon">
            <Edit />
          </el-icon>
        </div>
        <div class="step-info">
          <div class="step-title">提交申请</div>
          <div class="step-desc">填写申请信息</div>
        </div>
      </div>

      <!-- 横线 + 箭头（步骤1 → 步骤2） -->
      <div class="connector" :class="{ active: data.currentStep >= 1 }">
        <div class="line"></div>
        <div class="arrow-icon">
          <svg class="arrow-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z" />
          </svg>
        </div>
      </div>

      <!-- 步骤2：教师审核 -->
      <div class="process-item" :class="{ active: data.currentStep >= 1 }">
        <div class="icon-circle" :class="{ active: data.currentStep >= 1 }">
          <el-icon class="process-icon">
            <User />
          </el-icon>
        </div>
        <div class="step-info">
          <div class="step-title">教师审核</div>
          <div class="step-desc">1-2个工作日</div>
        </div>
      </div>

      <!-- 横线 + 箭头（步骤2 → 步骤3） -->
      <div class="connector" :class="{ active: data.currentStep >= 2 }">
        <div class="line"></div>
        <div class="arrow-icon">
          <svg class="arrow-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z" />
          </svg>
        </div>
      </div>

      <!-- 步骤3：院级审核 -->
      <div class="process-item" :class="{ active: data.currentStep >= 2 }">
        <div class="icon-circle" :class="{ active: data.currentStep >= 2 }">
          <el-icon class="process-icon">
            <OfficeBuilding />
          </el-icon>
        </div>
        <div class="step-info">
          <div class="step-title">院级审核</div>
          <div class="step-desc">3-5个工作日</div>
        </div>
      </div>

      <!-- 横线 + 箭头（步骤3 → 步骤4） -->
      <div class="connector" :class="{ active: data.currentStep >= 3 }">
        <div class="line"></div>
        <div class="arrow-icon">
          <svg class="arrow-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z" />
          </svg>
        </div>
      </div>

      <!-- 步骤4：完成认定 -->
      <div class="process-item" :class="{ active: data.currentStep >= 3 }">
        <div class="icon-circle" :class="{ active: data.currentStep >= 3 }">
          <el-icon class="process-icon">
            <Finished />
          </el-icon>
        </div>
        <div class="step-info">
          <div class="step-title">完成认定</div>
          <div class="step-desc">学分入库</div>
        </div>
      </div>
    </div>

    <!-- 关闭按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.formVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { computed, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import alovaInstance from "@/utils/request.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('credit-system-user') || '{}'),
  actName: '',
  pageNum: 1,
  pageSize: 5,
  total: 0,
  stuApplyRecordList: [],
  formVisible: false,
  form: {},
  beginTime: '',
  endTime: '',
  currentStep: 0 // 当前流程步骤索引
})

// 流程步骤配置（与设计图对应）
const processSteps = [
  {
    icon: 'Edit', // Element Plus 图标组件名
    title: '提交申请',
    desc: '填写申请信息',
    statusKey: 1 // 状态 1 对应“提交申请”环节
  },
  {
    icon: 'User',
    title: '教师审核',
    desc: '1-2个工作日',
    statusKey: 2 // 状态 2 对应“教师审核”环节
  },
  {
    icon: 'OfficeBuilding',
    title: '院级审核',
    desc: '3-5个工作日',
    statusKey: 3 // 状态 3 对应“院级审核”环节
  },
  {
    icon: 'Finished',
    title: '完成认定',
    desc: '学分入库',
    statusKey: 0 // 假设状态 0 对应“完成认定”环节
  }
]

// 状态与流程步骤的映射（根据实际接口调整）
const statusStepMap = {
  1: 0, // 状态 1 → 第 0 步（提交申请）
  2: 1, // 状态 2 → 第 1 步（教师审核）
  3: 2, // 状态 3 → 第 2 步（院级审核）
  0: 3  // 状态 0 → 第 3 步（完成认定）
}

//日期范围
const dateRange = ref([])

// 状态类型映射
const statusTypes = computed(() => ({
  0: 'success',   // 已通过
  1: 'info',      // 待分配
  2: 'warning',   // 待初审
  3: 'warning',   // 待终审
  4: 'danger',    // 已退回
}))

// 状态文本映射
const statusTexts = computed(() => ({
  0: '已通过',
  1: '待分配',
  2: '待初审',
  3: '待终审',
  4: '已退回',
}))

// 获取状态类型
const getStatusType = (status) => {
  return statusTypes.value[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  return statusTexts.value[status] || '未知状态'
}

const load = () => {
  console.log(dateRange.value)
  // 设置日期范围参数
  if (dateRange.value && dateRange.value.length === 2) {
    data.beginTime = dateRange.value[0];
    data.endTime = `${dateRange.value[1]} 23:59:59`;
  } else {
    data.beginTime = ''
    data.endTime = ''
  }
  alovaInstance.Get('/applicationRecord/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      stuId: data.user.stuId,
      beginTime: data.beginTime,
      endTime: data.endTime,
    }
  }).then(res => {
    if (res.code === '200') {
      data.stuApplyRecordList = res.data?.list
      data.total = res.data?.total
    }
  }).catch(error => {
    console.error('请求失败:', error);
    ElMessage.error(error.message);
  });
}

const reset = () => {
  dateRange.value = []
  // 重置日期参数
  data.beginTime = ''
  data.endTime = ''
  //重新渲染数据
  load()
}

//查看详细操作
const watchDetail = (row) => {
  //深拷贝一个新的对象用于编辑。这样就不会影响行对象
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
  // 根据状态匹配当前步骤
  const status = row.status
  data.currentStep = statusStepMap[status] || 0
}

load()

</script>

<style scoped>
/* 流程容器：水平分布，居中对齐，调整内边距等让内容更紧凑 */
.process-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 20px 0;
  margin-bottom: 30px;
  position: relative;
  margin-left: 20px;
}

/* 单个步骤：增大图标，确保居中，调整最小宽度等 */
.process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0.6;
  color: #999;
  transition: all 0.3s;
  min-width: 120px;
  z-index: 2;
  margin-right: 30px;
}

.process-item.active {
  opacity: 1;
  color: #409eff;
}

/* 增大图标容器及图标大小 */
.icon-circle {
  width: 72px;
  /* 进一步增大图标容器 */
  height: 72px;
  border-radius: 50%;
  background-color: #ebe7e5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all 0.3s;
  box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
  /* 初始化阴影 */
}

.icon-circle.active {
  background-color: #0e80f1;
  box-shadow: 0 0 0 6px rgba(64, 158, 255, 0.3);
  /* 添加高亮阴影效果 */
  transform: scale(1.05);
  /* 激活时轻微放大 */
}

.process-icon {
  font-size: 35px;
  color: #fff;
}

.step-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  color: #999;
}

/* 连接器样式：让横线完全显示，调整箭头位置等 */
.connector {
  flex: 1;
  position: relative;
  height: 4px;
  /* 加粗连接线 */
  background-color: #e5e7eb;
  margin: 0 10px;
  /* 调整间距 */
}

/* 横线样式：不超过箭头 */
.connector .line {
  height: 4px;
  background-color: #e5e7eb;
  flex: 1;
  margin-right: 8px;
}

/* 激活状态样式 */
.connector.active .line {
  background-color: #409eff;
}

.connector.active {
  background-color: #409eff;
}


/* 箭头样式 - 关键修改 */
.arrow-icon {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  z-index: 3;
}

.arrow-svg {
  width: 100%;
  height: 100%;
  fill: #e5e7eb;
  /* 默认颜色 */
}

/* 强制显示设置 */
.arrow-svg path {
  fill: inherit !important;
  /* 确保path元素继承fill颜色 */
  stroke: none !important;
  /* 移除可能的stroke干扰 */
}

.connector.active .arrow-icon svg {
  fill: #409eff;
  /* 激活状态颜色 */
}

/* .arrow-icon svg {
  fill: red !important;
} */

.dialog-footer {
  text-align: right;
}
</style>